<template>
    <div class="n1">
        <div style="padding: 20px;margin-bottom: 10%">
            <el-form :model="form" :rules="mRules" ref="form" label-width="120px">
                <el-card shadow="hover">
                    <div slot="header" class="clearfix">
                        <span>企业详情</span>
                    </div>
                    <div class="n3">
                        <el-row>
                            <el-col span="10">
                                <el-form-item label="企业名称:">
                                    <span>{{companyInfo.name| nullFilter}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col span="10">
                                <el-form-item label="企业地址:">
                                    <span>{{companyInfo.address| nullFilter}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col span="10">
                                <el-form-item label="企业性质:">
                                    <span v-if="!companyInfo.unitType">{{nullText}}</span>
                                    <el-tag v-else type='info' class="rit5" v-for="tag in split(companyInfo.unitType)">
                                        {{tag}}
                                    </el-tag>
                                </el-form-item>
                            </el-col>
                            <el-col span="10">
                                <el-form-item label="所属行业:">
                                    <span>{{companyInfo.industryType| nullFilter}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col span="10">
                                <el-form-item label="联系人1:">
                                    <span>{{companyInfo.contactPeople1| nullFilter}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col span="10">
                                <el-form-item label="联系人2:">
                                    <span>{{companyInfo.contactPeople2| nullFilter}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col span="10">
                                <el-form-item label="联系人1手机:">
                                    <span>{{companyInfo.phone| nullFilter}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col span="10">
                                <el-form-item label="联系人2手机:">
                                    <span>{{companyInfo.phone2| nullFilter}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>

                <el-card shadow="hover" style="margin-top: 5px">
                    <el-row>
                        <el-col span="8">
                            <!--                            switchMonth-->
                            <el-form-item label="数据所属月份:" prop="dataMonth">
                                <el-date-picker
                                        v-model="form.dataMonth"
                                        type="month"
                                        value-format="yyyy-MM-dd"
                                        @change="dateChange"
                                        placeholder="选择月">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-card>

                <el-card shadow="hover" style="margin-top: 10px">
                    <div slot="header" class="clearfix">
                        <span>岗位招聘信息</span>
                        <el-button style="float: right; padding: 3px 0;font-size: 14px;" type="text"
                                   @click="show('add')">新增岗位招聘信息
                        </el-button>
                    </div>
                    <el-table :data="tableData"
                              border fit style="width: 100%;"
                              highlight-current-row show-overflow-tooltip
                              @selection-change="selectionChange">

                        <el-table-column label="招聘岗位" prop="jobName" align="center">
                            <template slot-scope="scope">
                                {{scope.row.jobName|nullFilter}}
                            </template>
                        </el-table-column>
                        <el-table-column label="行业类别" prop="industryName" align="center">
                            <template slot-scope="scope">
                                {{scope.row.industryName|nullFilter}}
                            </template>
                        </el-table-column>
                        <el-table-column label="性别" prop="sex" align="center">
                            <template slot-scope="scope">
                                {{scope.row.sex|nullFilter}}
                            </template>
                        </el-table-column>
                        <el-table-column label="年龄段" prop="peopleAge" align="center">
                            <template slot-scope="scope">
                                {{scope.row.peopleAge|nullFilter}}
                            </template>
                        </el-table-column>
                        <el-table-column label="学历" prop="learnLevel" align="center">
                            <template slot-scope="scope">
                                {{scope.row.learnLevel|nullFilter}}
                            </template>
                        </el-table-column>
                        <el-table-column label="专业" prop="profession" align="center">
                            <template slot-scope="scope">
                                {{scope.row.profession|nullFilter}}
                            </template>
                        </el-table-column>
                        <el-table-column label="经验要求" prop="experience" align="center">
                            <template slot-scope="scope">
                                {{scope.row.experience|nullFilter}}
                            </template>
                        </el-table-column>
                        <el-table-column label="月薪范围" prop="monthSalary" align="center">
                            <template slot-scope="scope">
                                {{scope.row.monthSalary|nullFilter}}
                            </template>
                        </el-table-column>
                        <el-table-column label="其他待遇及条件" prop="other" align="center">
                            <template slot-scope="scope">
                                {{scope.row.other|nullFilter}}
                            </template>
                        </el-table-column>
                        <el-table-column label="招聘人数" prop="lackCount" align="center">
                            <template slot-scope="scope">
                                {{scope.row.lackCount|nullFilter}}
                            </template>
                        </el-table-column>
                        <el-table-column label="意向人数" prop="intentionCount" align="center">
                            <template slot-scope="scope">
                                {{scope.row.intentionCount|nullFilter}}
                            </template>
                        </el-table-column>
                        <el-table-column label="成功人数" prop="recruitCount" align="center">
                            <template slot-scope="scope">
                                {{scope.row.recruitCount|nullFilter}}
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="200" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="show('update',scope.row,scope.$index)">
                                    编辑
                                </el-button>
                                <el-divider direction="vertical"/>
                                <el-button type="text" size="small" @click="delete_(scope.$index,scope.row)">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </el-form>
        </div>

        <div class="toolbar-bottom-right">
            <el-button class="button" @click="backRouter()" size="medium">返回企业列表</el-button>
            <!--            <el-button type="primary" class="button" size="medium" @click="submit()">提交</el-button>-->
        </div>

        <!--新增企业-->
        <AddJob v-if="showAdd" :data="viewData" :option="viewOption" @close="close"/>
    </div>
</template>

<script lang="ts">
    import {Component} from 'vue-property-decorator'
    import {API} from "@/core/api/API";
    import {ElForm} from "element-ui/types/form";
    import {mixins} from "vue-class-component";
    import BaseVue from "@/core/mixin/BaseVue";
    import {errorMsg, successMsg, warningMsg} from "@/core/utils/message";
    import $http from "@/core/utils/http";
    import {rule} from "@/core/utils/rule";
    import Kit from "@/core/mixin/Kit";
    import AddJob from "@/views/government/company/recruit-Info/AddJob.vue";

    @Component({
        name: 'RecruitInfoEdit',
        components: {
            AddJob
        },
    })
    export default class RecruitInfoEdit extends mixins(BaseVue, Kit) {
        nullText = "暂无数据";

        form: any = {dataMonth: ""};

        //关闭时是否刷新分页
        backRefresh: boolean = false;

        mRules = {
            dataMonth: [rule.notNullBlur()],
            lackCount: [rule.notNullBlur()],
            intentionCount: [rule.notNullBlur()],
            recruitCount: [rule.notNullBlur()],
        };

        //初始化
        async mounted() {
            await this.getCompanyInfo();
            await this.getIndustry();
            await this.checkNowMonthData();
            this.getRecruitJob();
        }

        //重新获取焦点
        activated() {
        }

        //失去焦点
        deactivated() {
        }

        //月份切换处理
        dateChange() {
            this.getRecruitJob();
        }

        //添加用户
        insert() {
            (this.$refs.form as ElForm).validate().then(() => {
                $http.post(API.inWorkHumanInfoInsert, this.form.dataMonth).then((res: any) => {
                    if (res.success) {
                        this.backRefresh = true;
                        successMsg("已添加");
                    }
                });
            },).catch(() => {
                errorMsg("表单内容填写错误，请检查！");
            });
        }

        //删除表格数据
        delete_(index: any, row: any) {
            this.$confirm('是否确认删除这一条记录?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                $http.post(API.recruitDelete, [row.id]).then((res: any) => {
                    if (res.success) {
                        successMsg("操作成功");
                        this.getCompanyInfo();
                        this.getRecruitJob();
                    }
                });
            }).catch(() => {
                warningMsg("已取消");
            })
        }

        //路由参数
        get companyId() {
            return this.$route.query.id;
        }

        //查询企业详情
        companyInfo: any = {};

        async getCompanyInfo() {
            return $http.post(API.recruitCompanyInfo, {id: this.companyId}).then((res: any) => {
                if (res.success) {
                    this.companyInfo = res.data;
                }
                return res;
            });
        }

        getRecruitJob() {
            $http.post(API.recruitJobInfoS, {id: this.companyId, dataMonth: this.form.dataMonth}).then((res: any) => {
                if (res.success) {
                    this.tableData = res.data;
                    //////console.log(JSON.stringify(this.tableData))
                }
            });
        }

        //查询所属行业信息
        industryType: any = null;
        pIndustryType: any = null;

        async getIndustry() {
            return $http.post(API.industryTypeInfo, {id: this.companyInfo.industryId}).then((res: any) => {
                if (res.success) {
                    this.industryType = res.data.type;
                    this.pIndustryType = res.data.pType;
                }
                return res;
            });
        }

        //检查当月是否存在数据
        checkNowMonthData() {
            return $http.post(API.recruitCheckNowMonthData, {id: this.companyId}).then((res: any) => {
                this.form.dataMonth = res.time;
                if (res.hasMessage) {
                    this.$alert('当前选中月份存在数据,重复填写提交,会覆盖原有数据。', '提示', {
                        confirmButtonText: '确定',
                        type: 'warning'
                    });
                }
            });
        }

        showAdd = false;

        //切换视图
        show(type: any, data: any = {}, index: any = 0) {
            //赋值
            this.viewData = data;
            this.viewData.dataMonth = this.form.dataMonth;
            this.viewData.companyId = this.companyId;
            this.viewOption.type = type;
            this.viewOption.index = index;
            //修改
            if (type == "add") {
                this.viewOption.title = '新增岗位招聘信息';
                this.showAdd = true;
            }
            //修改
            if (type == "update") {
                this.viewOption.title = '岗位信息修改';
                this.showAdd = true;
            }

        }

        /**
         * 跨组件回传数据，赋值时父组件需要Copy一下
         */
        close(object: any) {
            this.showAdd = false;
            // this.tableData = copy(this.tableData);
            if (object.refresh) {
                this.getCompanyInfo();
                this.getRecruitJob();
            }
        }

        //关闭事件
        backRouter() {
            this.back("CompanyGList")
        }
    }


</script>

<style lang="scss">

    .n3 .el-form-item__content span {
        color: #999;
        font-size: 15px;
    }

    .n3 .el-form-item__label {
        font-size: 15px;
    }

    .n3 .el-form-item--small.el-form-item {
        margin-bottom: 15px;
    }
</style>
